<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="pageTitle.dashboard">仪表盘</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="dashboard">
        <!-- 顶部栏将通过 JavaScript 加载 -->
        <div id="header-container"></div>

        <!-- 主要内容区 -->
        <main class="main-content flex-grow">
            <!-- 状态卡片 -->
            <div class="status-cards">
                <div class="status-card">
                    <div class="status-icon blue">
                        <svg viewBox="0 0 24 24" width="24" height="24" class="icon">
                            <path fill="currentColor" d="M4 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H4zm16 18H4v-2h16v2zm0-4H4v-2h16v2zm0-4H4V3h16v8zM6 5h2v2H6V5zm0 8h2v2H6v-2zm4-8h8v2h-8V5zm0 8h8v2h-8v-2z"/>
                        </svg>
                    </div>
                    <div class="status-info">
                        <span class="status-label" data-i18n="hostCount"></span>
                        <span id="hostCount" class="status-value">--</span>
                    </div>
                </div>
                <div class="status-card">
                    <div class="status-icon red">
                        <svg viewBox="0 0 24 24" width="24" height="24" class="icon">
                            <path fill="currentColor" d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"/>
                        </svg>
                    </div>
                    <div class="status-info">
                        <span class="status-label" data-i18n="currentAlerts"></span>
                        <span id="alertCount" class="status-value">--</span>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-container">
                <div class="chart-box">
                    <div class="chart-header">
                        <h3 data-i18n="alertHistory"></h3>
                    </div>
                    <div id="trendChart" class="chart"></div>
                </div>
                <div class="chart-box">
                    <div class="chart-header">
                        <h3 data-i18n="currentAlertDistribution"></h3>
                    </div>
                    <div id="severityChart" class="chart"></div>
                </div>
            </div>
            <!-- 告警列表 -->
            <div class="alerts-list">
                <div class="list-header">
                    <h3 data-i18n="weeklyAlertHistory"></h3>
                </div>
                <div class="list-content">
                    <table>
                        <thead>
                            <tr>
                                <th data-i18n="host"></th>
                                <th data-i18n="alertContent" style="width: 110vh;"></th>
                                <th data-i18n="level"></th>
                                <th data-i18n="status"></th>
                                <th data-i18n="duration"></th>
                                <th data-i18n="startTime"></th>
                                <th data-i18n="endTime"></th>
                            </tr>
                        </thead>
                        <tbody id="alertsList">
                            <!-- 告警列表内容将通过 JavaScript 动态添加 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- 设置对话框容器 -->
    <div id="settingsContainer"></div>

    <div id="hostsModal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content" style="width: 80%; max-width: none;">
            <div class="modal-header">
                <h2 data-i18n="hostList"></h2>
                <button class="close-btn" id="closeHostsModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="hosts-list">
                    <table>
                        <thead>
                            <tr>
                                <th data-i18n="hostName"></th>
                                <th data-i18n="ipAddress"></th>
                                <th data-i18n="operatingSystem"></th>
                                <th class="sortable" data-sort="cpuCores" data-i18n="cpuCores"></th>
                                <th class="sortable" data-sort="memoryTotal" data-i18n="memoryTotal"></th>
                                <th class="sortable" data-sort="cpu" data-i18n="cpuUsage"></th>
                                <th class="sortable" data-sort="memory" data-i18n="memoryUsage"></th>
                                <th class="sortable" data-sort="alerts" data-i18n="alerts"></th>
                            </tr>
                        </thead>
                        <tbody id="hostsList">
                            <!-- 主机列表将通过 JavaScript 动态添加 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 主机详情对话框 -->
    <div id="hostDetailModal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h2 data-i18n="hostDetails"></h2>
                <button class="close-btn" id="closeHostDetailModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="host-detail">
                    <!-- 基本信息卡片 -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="fas fa-server"></i>
                            <span data-i18n="basicInfo"></span>
                        </div>
                        <div class="detail-card-body">
                            <div class="info-grid">
                                <div class="info-item">
                                    <label data-i18n="hostName"></label>
                                    <span id="detailHostName">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="ipAddress"></label>
                                    <span id="detailHostIP">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="systemType"></label>
                                    <span id="detailHostOS">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="runningTime"></label>
                                    <span id="detailUptime">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 硬件信息卡片 -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="fas fa-microchip"></i>
                            <span data-i18n="hardwareInfo"></span>
                        </div>
                        <div class="detail-card-body">
                            <div class="info-grid">
                                <div class="info-item">
                                    <label data-i18n="cpuCores"></label>
                                    <span id="detailCPUCores">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="memorySize"></label>
                                    <span id="detailMemoryTotal">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 性能监控卡片 -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <i class="fas fa-chart-line"></i>
                            <span data-i18n="performanceMonitor"></span>
                        </div>
                        <div class="detail-card-body">
                            <div class="performance-grid">
                                <div class="performance-chart-container">
                                    <div class="chart-title">
                                        <span data-i18n="cpuUsage24h"></span>
                                        <button class="zoom-btn" data-chart="cpu">
                                            <i class="fas fa-expand"></i>
                                        </button>
                                    </div>
                                    <div id="detailCPUChart" class="performance-chart"></div>
                                </div>
                                <div class="performance-chart-container">
                                    <div class="chart-title">
                                        <span data-i18n="memoryUsage24h"></span>
                                        <button class="zoom-btn" data-chart="memory">
                                            <i class="fas fa-expand"></i>
                                        </button>
                                    </div>
                                    <div id="detailMemoryChart" class="performance-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加放大图表的模态框 -->
                    <div id="zoomChartModal" class="modal">
                        <div class="modal-overlay"></div>
                        <div class="modal-content" style="width: 100%; max-width: none;">
                            <div class="modal-header">
                                <h2 id="zoomChartTitle"></h2>
                                <div class="time-range-buttons">
                                    <button class="time-btn" data-range="1h" data-i18n="timeButtons.1h">1小时</button>
                                    <button class="time-btn active" data-range="24h" data-i18n="timeButtons.24h">24小时</button>
                                    <button class="time-btn" data-range="7d" data-i18n="timeButtons.7d">7天</button>
                                    <button class="time-btn" data-range="15d" data-i18n="timeButtons.15d">15天</button>
                                    <button class="time-btn" data-range="30d" data-i18n="timeButtons.30d">30天</button>
                                </div>
                                <button class="close-btn" id="closeZoomChartModal">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="zoomChart" style="width: 100%; height: 80vh;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/i18n.js"></script>
    <script src="js/api.js"></script>
    <script src="js/header.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 